<template>
	<view class="event-container">
		<view style="padding: 20rpx;">
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">检查点</view>
				</view>
			</view>
			<view @click="handleTap('picker')" class="c-input">
				<text :class="{color: label === '请选择检查点'}">{{label}}</text>
				<lb-picker ref="picker" mode="selector" :list="checkList" :dataset="{ name: 'label' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: #fff;">*</text>
					<view class="desc">内容描述</view>
				</view>
			</view>
			<!-- <view class="title"><text style="color: red;">*</text>评价描述</view> -->
			<textarea style="height: 320rpx;" v-model="params['描述']" class="content" placeholder="请输入内容描述..." name="" id="" cols="30" rows="10"></textarea>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">附件</view>
				</view>
			</view>
			<upload :max="3" :bMargin="6"  v-model="params['附件']"></upload>
			
		</view>
		<button class="grid-btn" @click="onSubmit">提交</button>
	</view>
</template>

<script>
	import LbPicker from '../components/lb-picker'
	import upload from '../components/upload.vue'
	export default {
		components: {
			LbPicker,
			upload,
		},
		data() {
			return {
				label: '请选择检查点',
				params: {
					检查点id: null,
					描述: null,
					附件: []
				},
				checkList: [],
				typeList: ['company','restaurant']
			}
		},
		onLoad(options) {
			if(options.label && options.id) {
				this.label = options.label
				this.params.检查点id = +options.id
			}
			this.getCheckList()
		},
		methods: {
			getCheckList() {
				let phone = uni.getStorageSync('gridInfo').手机号
				this.$http.post('gridSystem/checkPoint/list', {负责人电话: phone}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						res.data.list = res.data.list || []
						res.data.list = res.data.list.filter(item => this.typeList.includes(item.检查点类型))
						res.data.list.forEach(item => {
							item.value = item.检查点名称
							item.label = item.检查点名称
						})
						this.checkList = res.data.list
					}
				})
			},
			onSubmit() {
				if(!this.params.检查点id) {
					uni.showToast({
						title: '请选择检查点',
						icon: 'none'
					})
					return
				}else if(!this.params.附件.length) {
					uni.showToast({
						title: '请上传图片附件',
						icon: 'none'
					})
					return
				}
				this.uploadAccount()
			},
			uploadAccount() {
				// console.log(this.params)
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/cpBook/addUpdate', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '/fireGridCheck/acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回首页'
						})
						
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.检查点id = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #808080;
	}
	.event-container {
		min-height: 100vh;
		padding-bottom: 100rpx;
		// padding: 20rpx;
		.flex {
			display: flex;
			align-items: center;
		}

		.title {
			margin-bottom: 30rpx;
		}
		.c-input {
			padding-left: 20rpx;
			border: 2rpx solid #ccc;
			height: 70rpx;
			display: flex;
			align-items: center;
		}
		.content {
			width: 710rpx;
			padding: 20rpx;
			border: 2rpx solid #ccc;
		}

		.btn {
			width: 568rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 120rpx;
			background-color: #1152FC;
			color: #fff;
		}

		.toast-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			.desc {
				margin-right: 20rpx;
				font-size: 32rpx;
			}

			.desc-text {
				color: #BCBCBC;
				font-size: 30rpx;
				margin-left: 18rpx;
			}
		}
	}
</style>
